<template>
  <view class="order-container">
    <view class="status-header">
      <view class="status-tag">{{ item.statusTag }}</view>
      <view class="status-text">{{ item.statusText }}</view>
    </view>
    
    <view class="order-info">
      <view class="time-container">
        <view class="clock-icon">
          <!-- <IconFont name="notice" size="24"></IconFont> -->
          <IconFont font-class-name="iconfont" class-prefix="icon" name="shijian" size="20"/>
        </view>
        <view class="time-text">{{ item.time }}</view>
      </view>
      <view class="price">¥ {{ item.price }}</view>
    </view>
    
    <view class="address-container">
      <view class="address-item">
        <view class="address-dot" :class="{'dot-orange': item.isStartAddressActive, 'dot-gray': !item.isStartAddressActive}"></view>
        <view class="address-content">{{ item.startAddress }}</view>
      </view>
      <view v-if="item.endAddress" class="address-arrow">
        <!-- <IconFont name="rect-right" size="24"></IconFont> -->
        <IconFont font-class-name="iconfont" class-prefix="icon" name="youjiantou-copy" size="20"/>
      </view>
    </view>
    
    <view v-if="item.endAddress" class="address-container">
      <view class="address-item">
        <view class="address-dot" :class="{'dot-orange': item.isEndAddressActive, 'dot-gray': !item.isEndAddressActive}"></view>
        <view class="address-content">{{ item.endAddress }}</view>
      </view>
    </view>
    
    <view class="order-number">
      订单编号：<text>{{ item.orderNumber }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineComponent, PropType } from 'vue';
import { IconFont } from "@nutui/icons-vue-taro";
interface OrderItem {
  statusTag: string;
  statusText: string;
  time: string;
  price: string;
  startAddress: string;
  isStartAddressActive: boolean;
  endAddress?: string;
  isEndAddressActive?: boolean;
  orderNumber: string;
}

const props = defineProps({
  item: {
    type: Object as PropType<OrderItem>,
    required: true,
  },
});

</script>

<style lang="scss">

.order-container {
  background-color: #fff;
  padding: 24rpx;
  width: 100%;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  width: 100%;
}

.status-tag {
  background-color: #ff7631;
  color: white;
  border-radius: 32rpx;
  padding: 8rpx 24rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.status-text {
  color: #ff7631;
  font-size: 28rpx;
  font-weight: 500;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  width: 100%;
}

.time-container {
  display: flex;
  align-items: center;
}

.clock-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16rpx;
}

.clock-icon svg {
  width: 28rpx;
  height: 28rpx;
  fill: #666;
}

.time-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.price {
  font-size: 36rpx;
  color: #ff7631;
  font-weight: 600;
}

.address-container {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.address-item {
  display: flex;
  align-items: flex-start;
}

.address-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-top: 12rpx;
  margin-right: 16rpx;
}

.dot-orange {
  background-color: #ff7631;
}

.dot-gray {
  background-color: #ccc;
}

.address-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.address-arrow {
  margin-left: auto;
  color: #ccc;
  font-size: 40rpx;
  font-weight: bold;
}

.order-number {
  font-size: 28rpx;
  color: #999;
  margin-top: 24rpx;
  display: flex;
}

.order-number text {
  color: #333;
  font-weight: 500;
}

</style>
